<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body {
      font: normal 30px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      background: #E6EAE9;
    }
    #mytable {
      width: 1200px;
      padding: 0;
      margin: 0;
    }
    th {
      font-size: 30px;
      color: #FFFFFF;
      text-align: left;
      padding: 5px 5px 4px 5px;
      background: #3E9D99;
    }
    td {
      font-size: 30px;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      padding: 5px 5px 4px 5px;
      color: rgba(0,0,0,0.8);
      background: #FFFFFF;
    }
    .settd td {
      background: #fff200;
      color: rgba(0,0,0,0.8);
    }
    .soi td {
      background: #ff9ff3;
      color: rgba(0,0,0,0.8);
    }
    .sud td {
      background: #ff6b6b;
      color: rgba(0,0,0,0.8);
    }
    .stt td {
      background: #48dbfb;
      color: rgba(0,0,0,0.8);
    }
    .snc td {
      background: #5f27cd;
      color: rgba(0,0,0,0.8);
    }

  </style>
</head>

<body>
  <table id="mytable" cellspacing="0">
    <tr>
      <th scope="col">{{tabledata1[0].sampleID}}</th>
      <th scope="col">{{tabledata1[0].tindex}}</th>
      <th scope="col">{{tabledata1[0].treadsNumber}}</th>
      <th scope="col">{{tabledata1[0].tmax1misIndex}}</th>
      <th scope="col">{{tabledata1[0].tmax1misNumber}}</th>
      <!-- <th scope="col">{{tabledata1[0].tsum1misNumber}}</th> -->
    </tr>
    {% for i in range(1, tabledata1|length) %}
      {% if tabledata1[i].bit15M %}
          <tr class="settd">
      {% elif tabledata1[i].OIflag %}
          <tr class="soi">
      {% elif tabledata1[i].UDflag %}
          <tr class="sud">
      {% elif tabledata1[i].TTflag %}
          <tr class="stt">
      {% elif tabledata1[i].NCflag %}
          <tr class="snc">
      {% else %}
      <tr>
      {% endif %}
      <td class="row">{{tabledata1[i].sampleID}}</td>
      <td class="row">{{tabledata1[i].tindex}}</td>
      <td class="row">{{tabledata1[i].treadsNumber}}</td>
      <td class="row">{{tabledata1[i].tmax1misIndex}}</td>
      <td class="row">{{tabledata1[i].tmax1misNumber}}</td>
      <!-- <td class="row">{{tabledata1[i].tsum1misNumber}}</td> -->
    </tr>
    {% endfor %}
  </table>
</body>
<script src="/home/yong_sun/bin/workflow/qcstat/html2canvas.js"></script>
<script>
  let canvas2 = document.createElement("canvas")
  let canvasObj = document.getElementById('mytable')
  let w = parseInt(window.getComputedStyle(canvasObj).width)
  let h = parseInt(window.getComputedStyle(canvasObj).height)

  let context = canvas2.getContext("2d")

  canvas2.width = w
  canvas2.height = h + 10
  window.html2canvas(canvasObj, {
    scale: 5, 
    canvas:canvas2,
    allowTaint: true,
    width: window.innerWidth, 
    height: window.innerHeight,
    onrendered: (canvas) => {
        let url = canvas.toDataURL('image/png')
        let a = document.createElement('a')
        a.setAttribute('download', 'fastqcnv.stats.png')
        a.href = url
        a.click()
    }
  })
</script>
</html>
